iT邦幫忙

2024 iThome 鐵人賽
DAY 27
0
JavaScript

Javascript網頁程式管理系統系列 第 27 篇

day 27 javascript社交工程演練網頁程式管理系統

16th鐵人賽
79 瀏覽

  • 分享至 

  • xImage
    •  

今天是第二十七天我們可以寫一個javascript社交工程演練網頁程式管理系統，以下是我的程式碼

  1. 用戶管理：

    • 管理員登入後可以新增、修改、刪除或停用用戶。

  2. 演練設置：

    • 管理員可以設置不同的社交工程演練，並管理不同演練的細節，例如目標人群、目標行為等。

  3. 數據分析：

    • 管理員可以查看演練結果的報告，分析成功率、目標用戶的反應行為等。

  4. 通知管理：

    • 系統可以發送釣魚郵件或其他社交工程手段，並記錄目標用戶的行為（例如是否點擊鏈接、回應等）。

以下是基本的框架，可以用來實現這個系統：

1. HTML 架構

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交工程演練管理系統</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>社交工程演練管理系統</h1>
    </header>

    <main>
        <div id="admin-login">
            <h2>管理員登入</h2>
            <form id="loginForm">
                <label for="username">帳號:</label>
                <input type="text" id="username" name="username" required>
                
                <label for="password">密碼:</label>
                <input type="password" id="password" name="password" required>
                
                <button type="submit">登入</button>
            </form>
        </div>

        <div id="dashboard" style="display: none;">
            <h2>儀表板</h2>
            <nav>
                <ul>
                    <li><button id="manageUsersBtn">用戶管理</button></li>
                    <li><button id="setupDrillsBtn">演練設置</button></li>
                    <li><button id="viewReportsBtn">數據分析</button></li>
                </ul>
            </nav>

            <section id="manageUsersSection" style="display: none;">
                <h3>用戶管理</h3>
                <button id="addUserBtn">新增用戶</button>
                <div id="userList"></div>
            </section>

            <section id="setupDrillsSection" style="display: none;">
                <h3>設置社交工程演練</h3>
                <form id="drillForm">
                    <label for="drillName">演練名稱:</label>
                    <input type="text" id="drillName" name="drillName" required>
                    
                    <label for="targetGroup">目標人群:</label>
                    <input type="text" id="targetGroup" name="targetGroup" required>
                    
                    <label for="drillDescription">描述:</label>
                    <textarea id="drillDescription" name="drillDescription" required></textarea>
                    
                    <button type="submit">建立演練</button>
                </form>
                <div id="drillList"></div>
            </section>

            <section id="viewReportsSection" style="display: none;">
                <h3>數據分析</h3>
                <div id="reports"></div>
            </section>
        </div>
    </main>

    <script src="app.js"></script>
</body>
</html>

2. CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin-bottom: 10px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
}

input, textarea, button {
    margin-bottom: 10px;
}

button {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

section {
    margin-top: 20px;
}

3. JavaScript (app.js)

document.addEventListener("DOMContentLoaded", () => {
    const loginForm = document.getElementById("loginForm");
    const dashboard = document.getElementById("dashboard");
    const manageUsersSection = document.getElementById("manageUsersSection");
    const setupDrillsSection = document.getElementById("setupDrillsSection");
    const viewReportsSection = document.getElementById("viewReportsSection");
    
    loginForm.addEventListener("submit", (event) => {
        event.preventDefault();
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        
        // 簡單驗證，實際應該從伺服器端進行驗證
        if (username === "admin" && password === "password") {
            document.getElementById("admin-login").style.display = "none";
            dashboard.style.display = "block";
        } else {
            alert("帳號或密碼錯誤");
        }
    });
    
    document.getElementById("manageUsersBtn").addEventListener("click", () => {
        hideSections();
        manageUsersSection.style.display = "block";
    });
    
    document.getElementById("setupDrillsBtn").addEventListener("click", () => {
        hideSections();
        setupDrillsSection.style.display = "block";
    });
    
    document.getElementById("viewReportsBtn").addEventListener("click", () => {
        hideSections();
        viewReportsSection.style.display = "block";
    });

    function hideSections() {
        manageUsersSection.style.display = "none";
        setupDrillsSection.style.display = "none";
        viewReportsSection.style.display = "none";
    }

    // 簡單演練設置表單提交
    const drillForm = document.getElementById("drillForm");
    drillForm.addEventListener("submit", (event) => {
        event.preventDefault();
        const drillName = document.getElementById("drillName").value;
        const targetGroup = document.getElementById("targetGroup").value;
        const drillDescription = document.getElementById("drillDescription").value;
        
        const drillList = document.getElementById("drillList");
        const newDrill = document.createElement("div");
        newDrill.textContent = `演練: ${drillName}, 目標: ${targetGroup}, 描述: ${drillDescription}`;
        drillList.appendChild(newDrill);

        drillForm.reset();
    });
});

1. HTML 部分

HTML 負責定義網頁的結構與內容。這部分的目的是建立網頁的基本框架，包括標題、表單和功能區域。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交工程演練管理系統</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>社交工程演練管理系統</h1>
    </header>

    <main>
        <div id="admin-login">
            <h2>管理員登入</h2>
            <form id="loginForm">
                <label for="username">帳號:</label>
                <input type="text" id="username" name="username" required>
                
                <label for="password">密碼:</label>
                <input type="password" id="password" name="password" required>
                
                <button type="submit">登入</button>
            </form>
        </div>

        <div id="dashboard" style="display: none;">
            <h2>儀表板</h2>
            <nav>
                <ul>
                    <li><button id="manageUsersBtn">用戶管理</button></li>
                    <li><button id="setupDrillsBtn">演練設置</button></li>
                    <li><button id="viewReportsBtn">數據分析</button></li>
                </ul>
            </nav>

            <section id="manageUsersSection" style="display: none;">
                <h3>用戶管理</h3>
                <button id="addUserBtn">新增用戶</button>
                <div id="userList"></div>
            </section>

            <section id="setupDrillsSection" style="display: none;">
                <h3>設置社交工程演練</h3>
                <form id="drillForm">
                    <label for="drillName">演練名稱:</label>
                    <input type="text" id="drillName" name="drillName" required>
                    
                    <label for="targetGroup">目標人群:</label>
                    <input type="text" id="targetGroup" name="targetGroup" required>
                    
                    <label for="drillDescription">描述:</label>
                    <textarea id="drillDescription" name="drillDescription" required></textarea>
                    
                    <button type="submit">建立演練</button>
                </form>
                <div id="drillList"></div>
            </section>

            <section id="viewReportsSection" style="display: none;">
                <h3>數據分析</h3>
                <div id="reports"></div>
            </section>
        </div>
    </main>

    <script src="app.js"></script>
</body>
</html>

解釋：

  • <header>：頁面的標題區塊，包含標題文字“社交工程演練管理系統”。
  • 登入表單（<div id="admin-login">）：這是一個管理員登入表單，包含帳號和密碼輸入框，讓使用者能登入系統。
  • 儀表板區域（<div id="dashboard">）：這個區域是登入後的主控頁面，隱藏起來，直到使用者成功登入才會顯示。包含用戶管理、演練設置和數據分析三個功能區。
  • 各個功能區（<section>）：分別代表用戶管理、設置演練和查看報告的區域。這些區域在初始頁面都隱藏，只有當使用者點擊相應的按鈕時才會顯示。

2. CSS 部分

CSS 用來美化網頁的外觀，設定元素的佈局和樣式。

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
}

h1, h2, h3 {
    margin-bottom: 10px;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
}

input, textarea, button {
    margin-bottom: 10px;
}

button {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

section {
    margin-top: 20px;
}

解釋：

  • body：設定全頁面的字體、背景顏色及字體顏色。
  • header：設定標頭區域的樣式，包含背景顏色、字體顏色和內邊距，使標題區域顯得更醒目。
  • form、input、button：定義表單及按鈕的樣式，讓表單元件有一致的佈局與間距。
  • button:hover：這個 CSS 規則使當滑鼠移到按鈕上時，按鈕的背景顏色會改變，提供交互的視覺效果。

3. JavaScript 部分

JavaScript 負責處理前端的邏輯，例如表單提交、區域顯示/隱藏等互動操作。

document.addEventListener("DOMContentLoaded", () => {
    const loginForm = document.getElementById("loginForm");
    const dashboard = document.getElementById("dashboard");
    const manageUsersSection = document.getElementById("manageUsersSection");
    const setupDrillsSection = document.getElementById("setupDrillsSection");
    const viewReportsSection = document.getElementById("viewReportsSection");
    
    // 登入表單提交處理
    loginForm.addEventListener("submit", (event) => {
        event.preventDefault();
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        
        // 簡單驗證，這裡實際應從伺服器端進行驗證
        if (username === "admin" && password === "password") {
            document.getElementById("admin-login").style.display = "none";
            dashboard.style.display = "block";
        } else {
            alert("帳號或密碼錯誤");
        }
    });
    
    // 切換到用戶管理區
    document.getElementById("manageUsersBtn").addEventListener("click", () => {
        hideSections();
        manageUsersSection.style.display = "block";
    });
    
    // 切換到演練設置區
    document.getElementById("setupDrillsBtn").addEventListener("click", () => {
        hideSections();
        setupDrillsSection.style.display = "block";
    });
    
    // 切換到數據分析區
    document.getElementById("viewReportsBtn").addEventListener("click", () => {
        hideSections();
        viewReportsSection.style.display = "block";
    });

    // 隱藏所有功能區
    function hideSections() {
        manageUsersSection.style.display = "none";
        setupDrillsSection.style.display = "none";
        viewReportsSection.style.display = "none";
    }

    // 處理演練設置表單提交
    const drillForm = document.getElementById("drillForm");
    drillForm.addEventListener("submit", (event) => {
        event.preventDefault();
        const drillName = document.getElementById("drillName").value;
        const targetGroup = document.getElementById("targetGroup").value;
        const drillDescription = document.getElementById("drillDescription").value;
        
        const drillList = document.getElementById("drillList");
        const newDrill = document.createElement("div");
        newDrill.textContent = `演練: ${drillName}, 目標: ${targetGroup}, 描述: ${drillDescription}`;
        drillList.appendChild(newDrill);

        drillForm.reset(); // 清空表單
    });
});

解釋：

  • document.addEventListener("DOMContentLoaded")：這段代碼確保當整個網頁載入完成後，才會執行內部的 JavaScript 代碼。
  • 登入邏輯：
    • 當用戶提交登入表單時，loginForm.addEventListener 會捕捉事件，並防止頁面刷新（event.preventDefault()）。
    • 使用者的帳號與密

碼被檢查（目前僅簡單比對 "admin" 和 "password"），如果正確則隱藏登入表單並顯示儀表板。

  • hideSections() 函數：用來隱藏所有儀表板的子區域，這樣當使用者點擊按鈕時，只有點擊的區域會顯示，其他區域會隱藏。
  • drillForm 提交處理：當設置演練表單提交時，會將演練名稱、目標人群及描述顯示在演練列表中，並重置表單。

上一篇
day 26 javascript有機蔬菜認證網頁程式管理系統
下一篇
day 28 Javascript結合line bot時事推薦股票網頁程式管理系統
系列文
Javascript網頁程式管理系統 共 30 篇
  1. 26
    day 26 javascript有機蔬菜認證網頁程式管理系統
  2. 27
    day 27 javascript社交工程演練網頁程式管理系統
  3. 28
    day 28 Javascript結合line bot時事推薦股票網頁程式管理系統
  4. 29
    day 29 javascript結合line分析地價成長空間網頁程式管理系統
  5. 30
    day 30 javascript腳踏車路線紀錄分享給車友網頁程式管理系統
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22082 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙